<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta name="referrer" content="no-referrer"/>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言板-ChenZhen的客栈-CZ的java学习日记</title>
    <meta name=”Description” Content=”ChenZhen的个人博客，留言板页面，博客留言信息显示”>
    <meta name=”Keywords” Content=”ChenZhen,博客,留言板,留言″>
    <link href="../static/images/favicon.ico" th:href="@{/images/favicon.ico}" rel="icon" type="image/x-ico">
    <link rel="stylesheet" href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}"  />
    <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">
</head>
<body>

<!--导航-->
<div  class="cz-navbar fixed">
    <div class="cz-pc-menu">
        <a href="index.html" th:href="@{/}" class="cz-navbar-brand text-decoration-none"><strong th:text="${author}">ChenZhen</strong></a>
        <div class="cz-navbar-links fs-6 fw-light" id="cz-navbar-links">
            <a href="index.html"    th:href="@{/}" class="cz-nav-link">首页</a>
            <a href="tags.html"     th:href="@{/tags}" class="cz-nav-link ">标签</a>
            <a href="archives.html" th:href="@{/archives}" class="cz-nav-link ">归档</a>
            <a href="message.html"  th:href="@{/message}" class="cz-nav-link cz-active-link">留言板</a>
            <a href="friends.html"  th:href="@{/friends}" class="cz-nav-link">友链</a>
            <a href="https://www.travellings.cn/go.html" class="cz-nav-link">🚇开往</a>
            <a href="about.html"    th:href="@{/about}" class="cz-nav-link">关于我</a>
        </div>
        <a href="#" class="cz-navbar-brand" data-bs-toggle="modal" data-bs-target="#searchModal">
            <strong>搜索</strong>
        </a>


        <button class="cz-menu-toggle-btn">菜单</button>
    </div>
    <div class="cz-mobile-menu fw-light fs-6">
        <a href="index.html"    th:href="@{/}" class="cz-nav-link">首页</a>
        <a href="tags.html"     th:href="@{/tags}" class="cz-nav-link ">标签</a>
        <a href="archives.html" th:href="@{/archives}" class="cz-nav-link ">归档</a>
        <a href="message.html"  th:href="@{/message}" class="cz-nav-link cz-active-link">留言板</a>
        <a href="friends.html"  th:href="@{/friends}" class="cz-nav-link">友链</a>
        <a href="https://www.travellings.cn/go.html" class="cz-nav-link">🚇开往</a>
        <a href="about.html"    th:href="@{/about}" class="cz-nav-link">关于我</a>
    </div>
</div>

<!-- 搜索框 -->
<div class="modal fade" id="searchModal" tabindex="-1" aria-labelledby="searchModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content p-2 ">
            <div class="modal-body ">
                <button type="button" class="btn-close float-end" data-bs-dismiss="modal" aria-label="Close"></button>
                <div class="text-center fs-5 mb-3">搜　索</div>
                <div class="input-group mb-4">
                    <span class="input-group-text" id="basic-addon1">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
                          <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
                        </svg>
                    </span>
                    <input id="keywordInput" type="text" class="form-control" placeholder="输入关键词" aria-describedby="basic-addon1">
                </div>

                <div class="mb-2">搜索结果</div>
                <!-- 搜索结果展示区域 -->
                <div id="searchResults" class="list-group">
                </div>
            </div>

        </div>
    </div>
</div>


<!--顶部背景图片-->
<div  alt="" class="cz-bg-section cz-bg-img"
      style="height: 45vh;background-image:url('../static/images/message.jpg')"
      th:style="'height: 45vh;background-image: url(' + @{/images/message.jpg} + ')'">

    <div class="m-bg-class_cover" align="center">
        <p class="cz-page-title"> 📪留言板 </p>
        <p class="cz-page-title2 fw-normal">有什么对我想说的话，来吧！</p>
    </div>

</div>


<div class="container " style="margin-top: -4em;max-width: 1200px">
    <div class="col">
        <div class="card border-2 mb-3 shadow">
            <!--表单-->
            <div id="message-form"  class="card-body border-1">
                <div class="row align-items-center mb-3">
                    <!--头像-->
                    <div class="col-auto">
                        <a class="avatar">
                            <img id="avatar" class="img-thumbnail w-100 h-100" >
                        </a>
                    </div>
                    <!--输入-->
                    <div class="col">
                        <div class="row">
                            <input type="hidden" name="parentMessageId" >
                            <input type="hidden" name="rootMessageId">
                            <input type="hidden" name="avatar">

                            <div class="col-md-4 mb-1">
                                <input name="email" type="email" class="form-control" placeholder="邮箱" id="emailInput" oninput="checkQQEmail()" th:value="${session.user != null ? session.user.email : ''}">
                            </div>
                            <div class="col-md-4 mb-1">
                                <input name="nickname" type="text" class="form-control" placeholder="昵称" th:value="${session.user != null ? session.user.nickname : ''}">
                            </div>
                            <div class="col-md-4 mb-1">
                                <input name="address"  type="text" class="form-control" placeholder="站点">
                            </div>
                        </div>
                    </div>


                </div>
                <!--留言内容-->
                <div class="row align-items-center mb-3">
                    <div class="col">
                        <textarea id="message-content" name="content" class="form-control" rows="3" placeholder="注意文明发言哦~"></textarea>
                    </div>
                </div>
                <!--表情框-->
                <div class="cz-emoji-container mb-3">
                    <div class="cz-emoji-content">
                        <!-- Emoji 列表 -->
                        <span onclick="addEmoji('😀')">😀</span><span onclick="addEmoji('😃')">😃</span><span onclick="addEmoji('😄')">😄</span><span onclick="addEmoji('😁')">😁</span><span onclick="addEmoji('😆')">😆</span><span onclick="addEmoji('😅')">😅</span><span onclick="addEmoji('🤣')">🤣</span><span onclick="addEmoji('😂')">😂</span><span onclick="addEmoji('🙂')">🙂</span><span onclick="addEmoji('🙃')">🙃</span><span onclick="addEmoji('😉')">😉</span><span onclick="addEmoji('😊')">😊</span><span onclick="addEmoji('😇')">😇</span><span onclick="addEmoji('🥰')">🥰</span><span onclick="addEmoji('😍')">😍</span><span onclick="addEmoji('🤩')">🤩</span><span onclick="addEmoji('😘')">😘</span><span onclick="addEmoji('😗')">😗</span><span onclick="addEmoji('😚')">😚</span><span onclick="addEmoji('😙')">😙</span><span onclick="addEmoji('😋')">😋</span><span onclick="addEmoji('😛')">😛</span><span onclick="addEmoji('😜')">😜</span><span onclick="addEmoji('🤪')">🤪</span><span onclick="addEmoji('😝')">😝</span><span onclick="addEmoji('🤑')">🤑</span><span onclick="addEmoji('🤗')">🤗</span><span onclick="addEmoji('🤭')">🤭</span><span onclick="addEmoji('🤫')">🤫</span><span onclick="addEmoji('🤔')">🤔</span><span onclick="addEmoji('🤐')">🤐</span><span onclick="addEmoji('🤨')">🤨</span><span onclick="addEmoji('😐')">😐</span><span onclick="addEmoji('😑')">😑</span><span onclick="addEmoji('😶')">😶</span><span onclick="addEmoji('😏')">😏</span><span onclick="addEmoji('😒')">😒</span><span onclick="addEmoji('🙄')">🙄</span><span onclick="addEmoji('😬')">😬</span><span onclick="addEmoji('🤥')">🤥</span><span onclick="addEmoji('😌')">😌</span><span onclick="addEmoji('😔')">😔</span><span onclick="addEmoji('😪')">😪</span><span onclick="addEmoji('🤤')">🤤</span><span onclick="addEmoji('😴')">😴</span><span onclick="addEmoji('😷')">😷</span><span onclick="addEmoji('🤒')">🤒</span><span onclick="addEmoji('🤕')">🤕</span><span onclick="addEmoji('🤢')">🤢</span><span onclick="addEmoji('🤮')">🤮</span><span onclick="addEmoji('🤧')">🤧</span><span onclick="addEmoji('🥵')">🥵</span><span onclick="addEmoji('🥶')">🥶</span><span onclick="addEmoji('🥴')">🥴</span><span onclick="addEmoji('😵')">😵</span><span onclick="addEmoji('🤯')">🤯</span><span onclick="addEmoji('🤠')">🤠</span><span onclick="addEmoji('🥳')">🥳</span><span onclick="addEmoji('😎')">😎</span><span onclick="addEmoji('🤓')">🤓</span><span onclick="addEmoji('🧐')">🧐</span><span onclick="addEmoji('😕')">😕</span><span onclick="addEmoji('😟')">😟</span><span onclick="addEmoji('🙁')">🙁</span><span onclick="addEmoji('☹️')">☹️</span><span onclick="addEmoji('😮')">😮</span><span onclick="addEmoji('😯')">😯</span><span onclick="addEmoji('😲')">😲</span><span onclick="addEmoji('😳')">😳</span><span onclick="addEmoji('🥺')">🥺</span><span onclick="addEmoji('😦')">😦</span><span onclick="addEmoji('😧')">😧</span><span onclick="addEmoji('😨')">😨</span><span onclick="addEmoji('😰')">😰</span><span onclick="addEmoji('😥')">😥</span><span onclick="addEmoji('😢')">😢</span><span onclick="addEmoji('😭')">😭</span><span onclick="addEmoji('😱')">😱</span><span onclick="addEmoji('😖')">😖</span><span onclick="addEmoji('😣')">😣</span><span onclick="addEmoji('😞')">😞</span><span onclick="addEmoji('😓')">😓</span><span onclick="addEmoji('😩')">😩</span><span onclick="addEmoji('😫')">😫</span><span onclick="addEmoji('🥱')">🥱</span><span onclick="addEmoji('😤')">😤</span><span onclick="addEmoji('😡')">😡</span><span onclick="addEmoji('😠')">😠</span><span onclick="addEmoji('🤬')">🤬</span>
                    </div>
                </div>
                <!--发送-->
                <div class="row align-items-center">
                    <div class="col">
                        <button id="messagepost-btn" type="button" class="btn btn-secondary w-100">发送</button>
                    </div>
                </div>

            </div>
        </div>

        <div class="card border-2 mb-3 shadow">
            <div class="card-body border-1">
                <!--评论列表-->
                <div class="cz-comment-section" id="message-container" th:fragment="messageList">
                    <div class="cz-comment" th:each="message : ${page.list}">
                            <div class="avatar" >
                            <img class="img-thumbnail w-100 h-100" src="../static/images/me.jpg" th:src="@{${message.avatar}}">
                            <a href="#" target="_blank" th:href="@{${message.address}}" th:if="${message.address != null}">
                                <div class="img-thumbnail cz-avatar-overlay">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="white" class="bi bi-link-45deg" viewBox="0 0 16 16">
                                        <path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/>
                                        <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"/>
                                    </svg>
                                </div>
                            </a>
                        </div>
                        <div class="cz-comment-content" >
                            <div class="cz-user-info">
                                <span th:text="${message.nickname}">ChenZhen</span>
                                <span class="badge text-bg-secondary" th:if="${message.adminMessage}">站主</span>
                            </div>
                            <div class="cz-comment-text" th:text="${message.content}" >快来说点什么吧</div>
                            <div class="cz-comment-footer">
                                <span th:text="${#temporals.format(message.createTime)}">2023-12-15 23:46</span>
                                <!--<span>Like</span>-->
                                <a href="#" class="me-1"
                                   th:data-parentmessageid="${message.id}"
                                   th:data-messagenickname="${message.nickname}"
                                   th:data-rootmessageid="${message.id}"
                                   onclick="reply(this)" >
                                    回复
                                </a>
                                <a href="#"
                                   th:if="${session.user}"
                                   th:href="@{/message/delete/{id}(id=${message.id},pageNum=${page.pageNum})}"
                                   onclick="return confirm('确定要删除该评论吗？三思啊! 删了可就没了！')">
                                    删除
                                </a>
                            </div>
                            <!--评论回复列表-->
                            <div class="cz-reply-section" th:if="${#arrays.length(message.messageReplyList)} > 0">
                                <div class="cz-comment" th:each="reply : ${message.messageReplyList}">

                                    <div class="avatar" >
                                        <img class="img-thumbnail w-100 h-100" src="../static/images/me.jpg" th:src="@{${reply.avatar}}">
                                        <a href="#" target="_blank" th:href="@{${reply.address}}" th:if="${reply.address != null}">
                                            <div class="img-thumbnail cz-avatar-overlay">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="white" class="bi bi-link-45deg" viewBox="0 0 16 16">
                                                    <path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/>
                                                    <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"/>
                                                </svg>
                                            </div>
                                        </a>
                                    </div>
                                    <div class="cz-comment-content">
                                        <div class="cz-user-info">
                                            <span th:text="${reply.nickname}">ChenZhen</span>
                                            <span class="badge text-bg-secondary" th:if="${reply.adminMessage}">站主</span>
                                            <span th:if="${reply.parentMessageId != reply.rootMessageId}" th:text="'@' + ${reply.parentNickname}" class="ps-2 text-primary">@小白</span>
                                        </div>
                                        <div class="cz-comment-text" th:text="${reply.content}">快来说点什么吧</div>
                                        <div class="cz-comment-footer">
                                            <span th:text="${#temporals.format(reply.createTime)}">2023-12-15 23:46</span>
                                            <!--                                <span>Like</span>-->
                                            <a href="#" class="me-1"
                                               th:data-parentmessageid="${reply.id}"
                                               th:data-messagenickname="${reply.nickname}"
                                               th:data-rootmessageid="${message.id}"
                                               onclick="reply(this)" >
                                                回复
                                            </a>
                                            <a href="#"
                                               th:if="${session.user}"
                                               th:href="@{/message/delete/{id}(id=${reply.id},pageNum=${page.pageNum})}"
                                               onclick="return confirm('确定要删除该评论吗？三思啊! 删了可就没了！')">
                                                删除
                                            </a>
                                        </div>
                                    </div>
                                </div>


                            </div>


                        </div>
                    </div>


                </div>

                <!--分页-->
                <nav>
                    <ul class="pagination justify-content-center">
                        <li class="page-item" th:classappend="${page.hasPreviousPage} ? 'page-item' : 'page-item disabled' ">
                            <a class="page-link text-black" href="#" th:href="@{ '/message?pageNum=' + ${page.prePage}}">上一页</a>
                        </li>

                        <li class="page-item"
                            th:each="num : ${page.navigatepageNums}"
                            th:classappend="${page.pageNum == num} ? 'page-item active' : 'page-item'">
                            <a class="page-link text-black fw-bold" href="#" th:href="@{ '/message?pageNum=' + ${num}}" th:text="${num}">1</a>
                        </li>

                        <li class="page-item" th:classappend="${page.hasNextPage} ? 'page-item' : 'page-item disabled' ">
                            <a class="page-link text-black" href="#" th:href="@{ '/message?pageNum=' + ${page.nextPage}}" >下一页</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</div>

<!--底部栏-->
<footer class="border-top p-3 bg-white text-muted small">
    <div class="container pb-5 ">
        <div class=" d-flex align-items-center justify-content-between">
            <div>
                <span class="cz-navbar-brand mr-2"><strong th:text="${author}">ChenZhen</strong></span>我的博客已营业：<span id="htmer_time">1年105天8时13分28秒</span>
            </div>
            <div>
                <a target="_blank" class="text-secondary fw-bold" href="#">粤ICP备2022122083号-1</a>
            </div>
        </div>
    </div>
</footer>



<script src="../static/lib/bootstrap.bundle.min.js" th:src="@{/lib/bootstrap.bundle.min.js}"></script>
<script src="../static/lib/jquery-3.2.1/jquery-3.2.1.min.js" th:src="@{/lib/jquery-3.2.1/jquery-3.2.1.min.js}"></script>
<script src="../static/lib/clickEffect.js" th:src="@{/lib/clickEffect.js}"></script>



<script th:inline="javascript">



    // 移动设备导航栏样式切换
    // 获取菜单切换按钮和移动设备菜单列表的引用
    const menuToggleBtn = document.querySelector('.cz-menu-toggle-btn');
    const mobileMenu = document.querySelector('.cz-mobile-menu');
    // 点击菜单切换按钮时的事件处理函数
    menuToggleBtn.addEventListener('click', () => {
        // 切换移动设备菜单列表的显示状态
        mobileMenu.classList.toggle('show');
    });

    function addEmoji(emoji) {
        var contentTextarea = document.getElementById('message-content');
        contentTextarea.value = contentTextarea.value + emoji;
    }

    function checkQQEmail() {
        var emailInput = document.getElementById('emailInput');
        var avatar = document.getElementById('avatar');

        // 正则表达式匹配QQ邮箱
        var qqEmailRegex = /^[1-9]\d{4,10}@qq\.com$/;
        var userEmail = emailInput.value.trim();

        if (qqEmailRegex.test(userEmail)) {
            // 提取QQ号码
            var qqNumber = userEmail.split('@')[0];
            // 构建QQ头像URL
            var avatarURL = 'http://q1.qlogo.cn/g?b=qq&nk=' + qqNumber + '&s=100';
            // 更新头像
            avatar.src = avatarURL;
            $("[name='avatar']").val(avatarURL);
        } else {
            // 如果不是QQ邮箱，显示默认图片
            avatar.src = '/images/me.jpg';
            $("[name='avatar']").val('/images/me.jpg');

        }
    }


    // 运行时间统计
    function secondToDate(second) {
        if (!second) {
            return 0;
        }
        var time = new Array(0, 0, 0, 0, 0);
        if (second >= 365 * 24 * 3600) {
            time[0] = parseInt(second / (365 * 24 * 3600));
            second %= 365 * 24 * 3600;
        }
        if (second >= 24 * 3600) {
            time[1] = parseInt(second / (24 * 3600));
            second %= 24 * 3600;
        }
        if (second >= 3600) {
            time[2] = parseInt(second / 3600);
            second %= 3600;
        }
        if (second >= 60) {
            time[3] = parseInt(second / 60);
            second %= 60;
        }
        if (second > 0) {
            time[4] = second;
        }
        return time;
    }
    function setTime() {
        /*此处为网站的创建时间*/
        var create_time = Math.round(new Date(Date.UTC(2022, 8, 21, 15, 15, 15)).getTime() / 1000);
        var timestamp = Math.round((new Date().getTime() + 8 * 60 * 60 * 1000) / 1000);
        currentTime = secondToDate((timestamp - create_time));
        currentTimeHtml = currentTime[0] + '年' + currentTime[1] + '天'
            + currentTime[2] + '时' + currentTime[3] + '分' + currentTime[4]
            + '秒';
        document.getElementById("htmer_time").innerHTML = currentTimeHtml;
    }
    setInterval(setTime, 1000);


    // 点击发送按钮时触发校验逻辑
    $('#messagepost-btn').click(function() {
        // 获取输入的值
        var email = $('input[name="email"]').val();
        var nickname = $('input[name="nickname"]').val();
        var content = $('textarea[name="content"]').val();

        // 校验邮箱
        if (!isValidEmail(email)) {
            alert('请输入有效的邮箱地址');
            return ;
        }
        // 校验昵称
        if (!nickname.trim()) {
            alert('昵称不能为空');
            return ;
        }

        // 校验留言内容
        if (!content.trim()) {
            alert('留言内容不能为空');
            return ;
        }
        postData();
    });


    // 简单的邮箱格式校验函数
    function isValidEmail(email) {
        var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return emailRegex.test(email);
    }


    //发送请求给后端
    function postData() {
        // 从地址栏解析参数
        var urlParams = new URLSearchParams(window.location.search);
        var pageNumParam = urlParams.get('pageNum');
        var pageNum = pageNumParam ? parseInt(pageNumParam) : 1;
        $("#message-container").load(`/message?pageNum=${pageNum}`,{
            "parentMessageId" : $("[name='parentMessageId']").val(),
            "rootMessageId" : $("[name='rootMessageId']").val(),
            "nickname": $("[name='nickname']").val(),
            "email"   : $("[name='email']").val(),
            "avatar" : $("[name='avatar']").val(),
            "content" : $("[name='content']").val(),
            "address" : $("[name='address']").val()

        },function (responseTxt, statusTxt, xhr) {
            clearContent();
        });

    }

    // 清除表单
    function clearContent() {
        $("[name='content']").val('');
        $("[name='parentMessageId']").val(null);
        $("[name='rootMessageId']").val(null);
        $("[name='content']").attr("placeholder", "请输入评论信息...");
    }

    function reply(obj) {
        var rootMessageId = $(obj).data('rootmessageid');
        var parentmessageId = $(obj).data('parentmessageid');
        var messageNickname = $(obj).data('messagenickname');

        $("[name='content']").attr("placeholder", "@" + messageNickname + ":").focus();
        $("[name='parentMessageId']").val(parentmessageId);
        $("[name='rootMessageId']").val(rootMessageId);
        $(window).scrollTo(0,500);
    }

    // 获取关键词输入框
    const keywordInput = $('#keywordInput');
    //搜索 当用户输入结束时触发事件
    keywordInput.on('input', function() {
        // 使用定时器延迟发送 AJAX 请求，以确保用户输入结束
        clearTimeout(this.timer);
        this.timer = setTimeout(function () {
            // 获取用户输入的关键词
            const keyword = keywordInput.val();
            // 发送 AJAX 请求
            $.ajax({
                url: '/search',
                method: 'GET',
                data: { keyword: keyword },
                success: function(response) {
                    // 处理从后端返回的数据
                    if (response.code === 20000){
                        var resultList = response.data.blogs;
                        // 获取搜索结果列表容器
                        var searchResults = $('#searchResults');
                        // 清空原来的结果
                        searchResults.empty();
                        if (resultList){
                            // 渲染搜索结果列表
                            resultList.forEach(function(blog) {
                                var blogItem = $('<a>').attr('href', `/blog/${blog.id}`).addClass('list-group-item list-group-item-action').text(blog.title);
                                searchResults.append(blogItem);
                            });
                        }
                    }
                },
                error: function(error) {
                    console.error('Error:', error);
                }
            });
        }, 1000); // 1000 毫秒延迟
    });

</script>
</body>
</html>
